<template>
    <el-container>
    <el-header style="background-color: #42b983;display: flex;">
        <div style="width: 100px;margin-top: 10px" >
            <el-avatar size="70" :src="require('@/assets/img/'+avatar+'')"></el-avatar>
        </div>

        <div style="margin-top: 20px;font-size: larger;margin-right:10px">{{account}}</div>
        <div    style="width: 100%">
            <el-menu
                    :default-active="activeIndex2"
                    class="el-menu-demo"
                    mode="horizontal"
                    @select="handleSelect"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b"
                    :router="true">
                <el-menu-item index="1" route="index">首页</el-menu-item>
                <el-menu-item index="2" route="userPetStorageRequest">寄养宠物</el-menu-item>
                <el-menu-item index="3" route="userUpdate">修改个人信息</el-menu-item>
            </el-menu>
        </div>


    </el-header>
        <el-main>

            <el-form :model="ruleForm"  :rules="rules" ref="ruleForm"  label-width="100px" class="demo-ruleForm">

                <el-form-item label="名字"  prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>

                <el-form-item label="品种"   prop="type">
                    <el-input v-model="ruleForm.type"></el-input>
                </el-form-item>

                <el-form-item label="年龄"   prop="age">
                    <el-input v-model="ruleForm.age"></el-input>
                </el-form-item>
                <el-form-item label="性别"  prop="sex">
                    <el-input v-model="ruleForm.sex"></el-input>
                </el-form-item>
                <el-form-item label="留言" prop="info">
                    <el-input v-model="ruleForm.info"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-date-picker
                            v-model="ruleForm.value1"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <!--图片上传-->
                <el-form-item label="照片">
                    <el-upload
                            class="avatar-uploader"
                            action="http://localhost:8081/user/upload"
                            :before-upload="before"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :on-err="uploadErr"
                            :with-credentials="true">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar"/>
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>

                </el-form-item>

                <el-form-item  >
                    <el-button v-on:click="storage">寄养</el-button>
                </el-form-item>


            </el-form>
        </el-main>
    </el-container>
</template>

<script>
    export default {
        name: "UserPetStorageRequest",
        data() {

            var checkAge = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('年龄不能为空'));
                }

            };
            var checkSex = (rule, value, callback) => {
                var pa = ["公", "母"]
                if (!pa.includes(value)) {
                    callback(new Error('性别只能为公、母'));
                }
            };
            return {
                account: '',
                userId: '',
                avatar: "",
                imageUrl:"",
                ruleForm: {
                    name: '',
                    type: '',
                    img: 'null.png',
                    age: '',
                    sex: '',
                    info: '',
                    value1: [new Date(), new Date(2000, 10, 11, 10, 10)],
                },
                rules: {
                    name: [
                        {required: true, message: '请输入名字', trigger: 'blur'},
                        {min: 1, max: 8, message: '长度在 1 到 8个字符', trigger: 'blur'}
                    ],
                    type: [
                        {required: true, message: '请输入品种', trigger: 'blur'},
                        {min: 2, max: 10, message: '长度在 2到 10 个字符', trigger: 'blur'}
                    ],
                    age: [
                        {validator: checkAge, trigger: 'blur'},
                    ],
                    sex: [
                        {validator: checkSex, trigger: 'blur'},
                    ],

                }
            }
        },
        mounted() {
            // 从sessionStore中获取数据
            this.userId=sessionStorage.getItem("userId");
            this.account=sessionStorage.getItem("account");
            this.avatar = sessionStorage.getItem("avatar");
            console.log("寄存页面  钩子函数"+this.avatar)
            console.log(this.account)
            console.log(new Date(this.ruleForm.value1[0]))
        },
        methods:{
            before(file){
                console.log("上传文件前====》")
            },
            handleAvatarSuccess(res, file) {
                this.ruleForm.img= file.name;//从后台获取filename给path赋值
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            uploadErr(err,file,fileList){
                console.log("upload err=========>"+file.name)
            },
            storage(){
                // console.log({{this.ruleForm.value1[0]|formatDate('yyyy-MM-dd HH:mm:ss')}})
                this.$http.get("http://localhost:8081/petstorage/addPetStorage?name="+this.ruleForm.name+"&type="+this.ruleForm.type+"&img="+this.ruleForm.img+
                    "&age="+this.ruleForm.age+ "&sex="+this.ruleForm.sex+"&info="+this.ruleForm.info+"&userId="+this.userId+"&startDate="+this.ruleForm.value1[0]+"&endDate="+this.ruleForm.value1[1]).then(req=>{
                    if(req.data){
                        console.log(this.ruleForm.value1)
                        alert("寄养成功"+this.ruleForm.value1[0])
                        this.$router.push("/index");
                    }else{
                        alert("失败")
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>